<template>
  <div class="app-container  bg-gray">
    <el-card class="box-1">
      <div slot="header">
        <span>{{ title }}</span>
        <el-button v-if="queryMatch(114)&&id!==1" type="success" size="small" icon="el-icon-edit" class="bg-green" style="float: right;" @click="toModify">编辑</el-button>
      </div>
      <el-form ref="form" label-width="160px">
        <el-form-item label="系统头像：">
          <ws-upload-single-img :disable="true" :path="form['wechat_pic']?ImageUrl+form['wechat_pic']:''"/>
        </el-form-item>
        <el-form-item label="证件照：">
          <ws-upload-single-img :disable="true" :path="form['real_avatar']?ImageUrl+form['real_avatar']:''"/>
        </el-form-item>
        <el-form-item label="姓名：">{{ form['name'] }}</el-form-item>
        <el-form-item label="性别：">{{ form['sex'] }}</el-form-item>
        <el-form-item label="工作状态：">{{ form['job_status']?'在职':'离职' }}</el-form-item>
        <el-form-item label="部门：" >{{ form['companys_name'] }}</el-form-item>
        <el-form-item label="职务：">{{ form['position'] }}</el-form-item>
        <el-form-item label="员工等级：">{{ form['grade'] }}</el-form-item>
        <el-form-item label="工号：">{{ form['job_number'] }}</el-form-item>
        <el-form-item label="手机：">{{ form['mobile'] }}</el-form-item>
        <el-form-item label="入职时间">{{ form['hiredate'] }}</el-form-item>
        <el-form-item label="转正时间">{{ form['formal_time'] }}</el-form-item>
        <el-form-item label="转正申请表图片：">
          <ws-upload-multiple-img :disable="true" :path="form['application_form_pic_url']"/>
        </el-form-item>
        <el-form-item label="入职表图片：">
          <ws-upload-multiple-img :disable="true" :path="form['form_pic_url']"/>
        </el-form-item>
        <el-form-item label="入职简历：">
          <ws-upload-multiple-img :disable="true" :path="form['resume_pic_url']"/>
        </el-form-item>
        <el-form-item label="年假天数：">{{ form['annual_leave'] }}</el-form-item>
        <el-form-item label="身份证号码：">{{ form['idcard_no'] }}</el-form-item>
        <el-form-item label="身份证正反面：">
          <ws-upload-multiple-img :disable="true" :path="form['identity_card_pic_url']"/>
        </el-form-item>
        <el-form-item label="出生年月：">{{ form['birth_date'] }}</el-form-item>
        <el-form-item label="年龄：">{{ form['age'] }}</el-form-item>
        <el-form-item label="身高：">{{ form['stature'] }}</el-form-item>
        <el-form-item label="民族：">{{ form['nation'] }}</el-form-item>
        <el-form-item label="籍贯：">{{ form['native_place'] }}</el-form-item>
        <el-form-item label="户口类型：">{{ form['isCity']?'城市':'非城市' }}</el-form-item>
        <el-form-item label="户口所在地：">{{ form['reg_permanent_type'] }}</el-form-item>
        <el-form-item label="婚姻状况：">{{ form['marital_status']===3?'丧偶':form['marital_status']===1?'已婚':form['marital_status']===2?'离异':'未婚' }}</el-form-item>
        <el-form-item label="政治面貌：">{{ form['political_affiliation'] }}</el-form-item>
        <el-form-item label="最高学历：">{{ form['highest_edu'] }}</el-form-item>
        <el-form-item label="学位：">{{ form['degree'] }}</el-form-item>
        <el-form-item label="技术职称：">{{ form['technical_title'] }}</el-form-item>
        <el-form-item label="证书图片：">
          <ws-upload-multiple-img :disable="true" :path="form['certificate_pic_url']"/>
        </el-form-item>
        <el-form-item label="体检报告：">
          <ws-upload-multiple-img :disable="true" :path="form['examination_pic_url']"/>
        </el-form-item>
        <el-form-item label="其他图片：">
          <ws-upload-multiple-img :disable="true" :path="form['other_pic_url']"/>
        </el-form-item>
        <el-form-item label="社保号：">{{ form['social_security_no'] }}</el-form-item>
        <el-form-item label="公积金账号：">{{ form['public_reserve_funds'] }}</el-form-item>
        <el-form-item label="当前住址：">{{ form['current_address'] }}</el-form-item>
        <el-form-item label="家庭住址：">{{ form['home_address'] }}</el-form-item>
        <el-form-item label="固定电话：">{{ form['tel_phone'] }}</el-form-item>
        <el-form-item label="紧急联系人：">{{ form['binduser_name'] }}</el-form-item>
        <el-form-item label="紧急联系人电话：">{{ form['binduser_phone'] }}</el-form-item>
        <el-form-item label="教育/培训经历：">
          <el-table :data="form.education_history1" style="border:1px solid #ddd">
            <el-table-column label="起止时间" min-width="180">
              <template slot-scope="scope">
                {{ scope.row.startStopTime[0]+'-'+scope.row.startStopTime[1] }}
              </template>
            </el-table-column>
            <el-table-column prop="school" label="学校" />
            <el-table-column prop="major" label="专业" />
            <el-table-column prop="education" label="学历" />
            <el-table-column prop="degree" label="学位" />
            <el-table-column prop="studyWay" label="学习方式" />
          </el-table>
        </el-form-item>
        <el-form-item label="工作经历：">
          <el-table :data="form.work_history1" style="border:1px solid #ddd">
            <el-table-column label="起止时间" min-width="180">
              <template slot-scope="scope">
                {{ scope.row.startStopTime[0]+'-'+scope.row.startStopTime[1] }}
              </template>
            </el-table-column>
            <el-table-column prop="workunit" label="工作单位" min-width="130" />
            <el-table-column prop="station" label="职务(岗位)" />
            <el-table-column prop="exitReason" label="离职原因" />
          </el-table>
        </el-form-item>
        <el-form-item label="外语语种：">{{ form['foreigner_language'] }}</el-form-item>
        <el-form-item label="语种掌握程度：">{{ form['foreigner_language_status']?'熟练':'一般' }}</el-form-item>
        <el-form-item label="计算机应用水平：">{{ form['computer_science_level'] }}</el-form-item>
        <el-form-item label="技术/技能职称：">{{ form['skill_title'] }}</el-form-item>
        <el-form-item label="是否会粤语：">{{ form['cantonese_skill_status']?'会':'不会' }}</el-form-item>
        <el-form-item label="证书种类和等级：">{{ form['certificate_info'] }}</el-form-item>
        <el-form-item label="最近雇主姓名：">{{ form['lastest_employer_name'] }}</el-form-item>
        <el-form-item label="最近雇主职务：">{{ form['lastest_employer_job'] }}</el-form-item>
        <el-form-item label="最近雇主电话：">{{ form['lastest_employer_phone'] }}</el-form-item>
        <el-form-item label="家庭成员信息：">{{ form['family_info'] }}</el-form-item>
        <el-form-item label="公司熟人名称：">{{ form['acquaintance_name'] }}</el-form-item>
        <el-form-item label="熟人所在部门：">{{ form['acquaintance_department'] }}</el-form-item>
        <el-form-item label="熟人职务：">{{ form['acquaintance_job'] }}</el-form-item>
        <el-form-item label="与熟人的关系：">{{ form['acquaintance_job'] }}</el-form-item>
        <el-form-item label="领取的物品：">{{ form['goods_collection'] }}</el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 页面标题
      title: '',
      // 图片地址域名
      // ImageUrl: this.$store.getters.serverUrl,
      ImageUrl: '',
      // 部门列表
      companyList: [],

      // 教育表或工作表选择的表格行
      tableIdx: null,
      // 教育培训经历表单弹窗
      trainingForm: {
        // 开始时间
        startStopTime: null,
        // 学习地址
        school: '',
        // 专业
        major: '',
        // 学历
        education: '',
        // 学位
        degree: '',
        // 学习方式
        studyWay: ''
      },
      // 工作经历表单弹窗
      workingForm: {
        // 开始时间
        startStopTime: null,
        // 工作岗位
        workunit: '',
        // 职务
        station: '',
        // 离职原因
        exitReason: ''
      },
      form: {
        // 教育培训经历
        education_history1: [],
        // 工作经历
        work_history1: [],
        // 入职表图片地址
        form_pic_url: [],
        // 入职简历地址
        resume_pic_url: [],
        // 转正申请表图片
        application_form_pic_url: [],
        // 身份证正反面图片地址
        identity_card_pic_url: [],
        // 证书图片地址
        certificate_pic_url: [],
        // 体检报告图片地址
        examination_pic_url: [],
        // 其他图片地址
        other_pic_url: []
      }
    }
  },
  watch: {
  },
  created() {
    this.title = '人事信息'
    this.getCompanyList()
    this.id = this.$route.query.id ? this.$route.query.id : this.$store.getters.id
    this.getData(this.id)
  },
  methods: {
    /**
     *  获取用户信息
     *  接口:'customer/detail/{id}'
     */
    getData(id) {
      const url = 'hr/getInfo/' + id
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.form = res.data['user_data']
        this.form.education_history ? this.form.education_history1 = JSON.parse(this.form.education_history) : (this.form.education_history1 = [])
        this.form.work_history ? this.form.work_history1 = JSON.parse(this.form.work_history) : (this.form.work_history1 = [])

        // 图片转为保存需要的string格式
        this.form.form_pic_list = this.form.form_pic ? this.form.form_pic.join(',') : '';
        // 选中的图片列表
        this.form.form_pic_url = [];
        for (const i in this.form.form_pic) {
          this.form.form_pic_url.push({ id: this.form.form_pic[i], url: this.ImageUrl + this.form.form_pic[i] });
        }
        this.form.resume_pic_list = this.form.resume_pic ? this.form.resume_pic.join(',') : '';
        this.form.resume_pic_url = [];
        for (const i in this.form.resume_pic) {
          this.form.resume_pic_url.push({ id: this.form.resume_pic[i], url: this.ImageUrl + this.form.resume_pic[i] });
        }

        this.form.application_form_pic_list = this.form.application_form_pic ? this.form.application_form_pic.join(',') : '';
        this.form.application_form_pic_url = [];
        for (const i in this.form.application_form_pic) {
          this.form.application_form_pic_url.push({ id: this.form.application_form_pic[i], url: this.ImageUrl + this.form.application_form_pic[i] });
        }

        this.form.identity_card_pic_list = this.form.identity_card_pic ? this.form.identity_card_pic.join(',') : '';
        this.form.identity_card_pic_url = [];
        for (const i in this.form.identity_card_pic) {
          this.form.identity_card_pic_url.push({
            id: this.form.identity_card_pic[i],
            url: this.ImageUrl + this.form.identity_card_pic[i]
          });
        }

        this.form.certificate_pic_list = this.form.certificate_pic ? this.form.certificate_pic.join(',') : ''
        this.form.certificate_pic_url = []
        for (const i in this.form.certificate_pic) {
          this.form.certificate_pic_url.push({
            id: this.form.certificate_pic[i],
            url: this.ImageUrl + this.form.certificate_pic[i]
          })
        }

        this.form.examination_pic_list = this.form.examination_pic ? this.form.examination_pic.join(',') : ''
        this.form.examination_pic_url = []
        for (const i in this.form.examination_pic) {
          this.form.examination_pic_url.push({
            id: this.form.examination_pic[i],
            url: this.ImageUrl + this.form.examination_pic[i]
          })
        }

        this.form.other_pic_list = this.form.other_pic ? this.form.other_pic.join(',') : ''
        this.form.other_pic_url = []
        for (const i in this.form.other_pic) {
          this.form.other_pic_url.push({
            id: this.form.other_pic[i],
            url: this.ImageUrl + this.form.other_pic[i]
          })
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     *  获取部门列表
     *  接口:'company/all-list'
     */
    getCompanyList() {
      const url = 'company/all-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.companyList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    toModify() {
      const query = { id: this.id }
      query.id = this.id
      this.$router.push({
        path: '/personnel/staff/modify',
        query: query
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;
  > div span {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
  }
  .el-form {
    max-width: 900px;
    .title {
      font-weight: 600;
    }
    .remark {
      font-size: 13px;
      color: $textGray;
    }
    > div > .el-button {
      @extend .bg-green;
      width: 20%;
      min-width: 160px;
    }
  }
}
.el-checkbox {
  margin-right: 30px;
}
.el-checkbox + .el-checkbox {
  margin-left: 0;
  margin-right: 30px;
}

.dialog {
  .picker {
    margin-right: 15px;
    width: 300px;
  }
  .el-input {
    width: 240px;
  }
}
</style>
